<template>
  <el-dialog
   v-model="dialogVisible"
   title="学习经历"
   :before-close="CloseDia"
   width="70%">
   <div class="data-container">
      <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" width="80" label="序号"/>
      <el-table-column prop="startDate" label="开始时间" width="240">
        <template  #default="scope">
          {{ scope.row.startDate }}
        </template>
      </el-table-column>
      <el-table-column prop="endDate" label="结束时间" width="240">
        <template #default="scope">
          {{ scope.row.endDate }}
        </template>
      </el-table-column>
      <el-table-column prop="education" label="学历" width="200">
        <template #default="scope">
          {{ scope.row.education }}
        </template>
      </el-table-column>
      <el-table-column prop="school" label="学校" width="200">
        <template #default="scope">
          {{ scope.row.school }}
        </template>
      </el-table-column>
      <el-table-column prop="profession" label="专业" width="200">
        <template #default="scope">
          {{ scope.row.profession }}
        </template>
      </el-table-column>
      <el-table-column prop="degree" label="学位" width="180">
        <template #default="scope">
          {{ scope.row.degree }}
        </template>
      </el-table-column>
      <el-table-column prop="upperEducation" label="是否最高学历" width="120">
        <template #default="scope">
          {{ scope.row.upperEducation }}
        </template>
      </el-table-column>
      <el-table-column prop="upperDegree" label="是否最高学位" width="120">
        <template #default="scope">
          {{ scope.row.upperDegree }}
        </template>
      </el-table-column>
      <el-table-column prop="gainDate" label="（预计）获取日期" width="240">
        <template #default="scope">
            {{ scope.row.gainDate }}
          <!-- <el-input></el-input> -->
        </template>
      </el-table-column>
      <el-table-column prop="country" label="学位国家" width="120">
        <template #default="scope">
          {{ scope.row.country }}
        </template>
      </el-table-column>
      <el-table-column prop="learnForm" label="学习形式" width="120">
        <template #default="scope">
          {{ scope.row.learnForm }}
        </template>
      </el-table-column>
      <el-table-column prop="cultureType" label="培养类型" width="120">
        <template #default="scope">
          {{ scope.row.cultureType }}
        </template>
      </el-table-column>
    </el-table>
  </div>
   </el-dialog>
</template>

<script setup>
import { ref, watch, onActivated, defineEmits, defineProps, computed } from 'vue'
import { getObjectById } from '@/api/recruit'

const dialogVisible = computed(() => props.isShow)

const tableData = ref([])

const id = computed(() => props.currentId)

const props = defineProps({
  isShow: {
    type: Boolean,
    default: false
  },
  currentId: {
    type: Number
  }
})

const emits = defineEmits(['onCancel', 'click'])
const CloseDia = () => {
  emits('diaCancel', false)
}

const selectFormStore = id => {
  getObjectById('learn', id).then(res => {
    console.log(res)
    tableData.value = res
  })
}

watch(() => {
  if (id.value) {
    selectFormStore(id.value)
  } else {
    tableData.value = []
  }
})
</script>

<style>

</style>
